/**
 * @desc 酒店设置
 * @author yd_zhaorongjun
 */
<template>
  <div class="gl_contentBox_noShadow gl_heightFull" style="padding-top:10px">
    <template>
      <el-row style="margin:0 0 28px 0">
        <!-- 添加酒店按钮 -->
        <el-col :span="24">
          <el-button style="margin-right:23px" type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="editOfAdd()">添加酒店</el-button>
          <span v-loading="timeLoading">
            <span v-if="bookingTime">
              <span style="vertical-align: middle;">酒店预定时间：{{ bookingTime.startDateTime | FormatDate('yyyy-MM-dd') }} 至 {{ bookingTime.endDateTime | FormatDate('yyyy-MM-dd') }}</span>
              <el-button style="color:#FFBA00;margin-left:31px;font-size:14px" type="text" size="mini" @click="clickTime('edit')">修改</el-button>
            </span>
            <span v-else>
              <span style="vertical-align: middle;">酒店预订时间未设置</span>
              <el-button style="color:#FFBA00;margin-left:31px;font-size:14px" type="text" size="mini" @click="clickTime('add')">请设置</el-button>
            </span>
          </span>
        </el-col>
      </el-row>
      <el-table v-loading="tableLoading" :data="tableData" class="gl_table_noBorder" size="mini" style="width: 100%;" @expand-change="expandChange">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table v-loading="props.row.hotel.tableLoading" :data="props.row.hotel.children" class="gl_table_childrenThead" size="mini" style="width: 100%;">
              <el-table-column label="房型图片" align="center" width="110">
                <template slot-scope="{row}">
                  <img class="roomPhoto" :src="getStaticFileUrl(row.room.imagePath)" alt="" @error="errorPhoto" @mouseenter="showRoomImg(...arguments, row.room.imagePath)" @mouseleave="hideRoomImg(row.room.imagePath)">
                </template>
              </el-table-column>
              <el-table-column
                label="房型名称"
                min-width="140"
              >
                <template slot-scope="{row}">
                  {{ row.room.name || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                label="床型"
                width="110"
              >
                <template slot-scope="{row}">
                  {{ row.room.bedType.name || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                label="早餐"
                width="100"
              >
                <template slot-scope="{row}">
                  {{ row.room.breakfastType.name || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                label="入住人数"
                width="90"
              >
                <template slot-scope="{row}">
                  {{ row.room.personCount ? row.room.personCount + '人' : '--' }}
                </template>
              </el-table-column>
              <el-table-column
                label="建筑面积"
                width="90"
              >
                <template slot-scope="{row}">
                  {{ row.room.area ? row.room.area + '平方米' : '--' }}
                </template>
              </el-table-column>
              <el-table-column
                label="窗户"
                width="85"
                align="center"
              >
                <template slot-scope="{row}">
                  <span v-if="row.room.hasWindow == null">--</span>
                  <span v-else>{{ row.room.hasWindow ? '是' : '否' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="价格" align="center" width="130">
                <template slot-scope="{row}">
                  <div v-if="row.isEdit" class="gl_input_number">
                    ￥
                    <el-input-number v-model="Api_PUT_LaunchedRoomUpdateDto.price" :controls="false" :precision="2" placeholder="请输入" size="mini" controls-position="right" :min="0" style="width: 55%;padding-left:5px;padding-right:5px" /> /每晚
                  </div>
                  <span v-else>
                    {{ row.price || row.price === 0 ? '￥' + row.price/100 + ' /每晚' : '--' }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="房间数量" align="center" width="120">
                <template slot-scope="{row}">
                  <!-- <div v-if="row.isEdit" class="gl_input_number">
                    <el-input-number v-model="Api_PUT_LaunchedRoomUpdateDto.count" :controls="false" :precision="0" placeholder="请输入" size="mini" controls-position="right" :min="0" style="width: 60%;padding-left:5px;padding-right:5px" />间
                  </div>
                  <span v-else>
                    {{ row.count || '--' }} 间
                  </span> -->
                  {{ row.count || '--' }} 间
                </template>
              </el-table-column>
              <el-table-column label="是否允许加床" align="center" width="120">
                <template slot-scope="{row}">
                  <el-select v-if="row.isEdit" v-model="Api_PUT_LaunchedRoomUpdateDto.hasExtraBed" placeholder="请选择" style="width:85%" size="mini">
                    <el-option :value="false" label="否" />
                    <el-option :value="true" label="是" />
                  </el-select>
                  <span v-else>
                    {{ row.hasExtraBed ? '是' : '否' }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="加床价格" align="center" width="130">
                <template slot-scope="{row}">
                  <div v-if="row.isEdit" class="gl_input_number">
                    ￥
                    <el-input-number v-model="Api_PUT_LaunchedRoomUpdateDto.extraBedPrice" :disabled="!Api_PUT_LaunchedRoomUpdateDto.hasExtraBed" :controls="false" :precision="2" placeholder="请输入" size="mini" controls-position="right" :min="0" style="width: 55%;padding-left:5px;padding-right:5px" /> /每晚
                  </div>
                  <span v-else>
                    {{ row.extraBedPrice || row.extraBedPrice === 0 ? '￥' + row.extraBedPrice/100 + ' /每晚' : '--' }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('table.actions')" min-width="240">
                <template slot-scope="{row,$index}">
                  <el-button size="mini" type="text" style="color:#FF3434" @click="deleteTableRow(row, props.row)">删除</el-button>
                  <el-button v-if="row.isEdit" size="mini" type="text" @click="clickChildrenRowSave(row, props.row)">保存</el-button>
                  <el-button v-else size="mini" type="text" @click="clickEidt(row, props.$index, $index, true)">编辑</el-button>
                  <el-button size="mini" type="text" @click="addRomemanage('edit',row)">库存管理</el-button>
                  <el-button size="mini" type="text" @click="addRomemanage('check',row)">查看</el-button>
                  <el-button size="mini" type="text" style="color:#FF3434" @click="deleteroom(row)">删除库存</el-button>
                  <el-button v-if="row.isEdit" size="mini" type="text" @click="clickEidt(row, props.$index, $index, false)">取消</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="酒店图片" align="center" width="70">
          <template slot-scope="{row}">
            <img class="hotelPhoto" :src="getStaticFileUrl(row.hotel.imagePath)" alt="" @error="errorPhoto" @mouseenter="showImg(...arguments, row.hotel.imagePath)" @mouseleave="hideImg(row.hotel.imagePath)">
          </template>
        </el-table-column>
        <el-table-column
          label="酒店名称"
          :tooltip="true"
          width="215"
        >
          <template slot-scope="{row}">
            <el-popover
              placement="top"
              width="380"
              trigger="hover"
              :open-delay="400"
              :content="row.hotel.name"
            >
              <div slot="reference" class="gl_ellipsis">{{ row.hotel.name || '--' }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="酒店地址"
          :tooltip="true"
          width="215"
        >
          <template slot-scope="{row}">
            <el-popover
              placement="top"
              width="400"
              trigger="hover"
              :open-delay="400"
              :content="row.hotel.address"
            >
              <div slot="reference" class="gl_ellipsis">{{ row.hotel.address || '--' }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="酒店星级"
          width="140"
          align="center"
        >
          <template slot-scope="{row}">
            <div class="block">
              <el-rate v-model="hotelRatingCode[row.hotel.hotelRatingCode]" disabled />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="入住时间"
          align="center"
          width="110"
        >
          <template slot-scope="{row}">
            {{ row.hotel.checkInTime ? row.hotel.checkInTime + '以后' : '--' }}
          </template>
        </el-table-column>
        <el-table-column
          label="离店时间"
          align="center"
          width="110"
        >
          <template slot-scope="{row}">
            {{ row.hotel.checkOutTime ? row.hotel.checkOutTime + '以前' : '--' }}
          </template>
        </el-table-column>
        <el-table-column
          label="酒店介绍"
          :tooltip="true"
          min-width="215"
        >
          <template slot-scope="{row}">
            <el-popover
              placement="top"
              width="400"
              trigger="hover"
              :open-delay="400"
              :content="row.hotel.description"
            >
              <div slot="reference" class="gl_ellipsis">{{ row.hotel.description || '--' }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" width="200">
          <template slot-scope="{row}">
            <!-- <el-button size="mini" type="text" @click="editOfAdd(row,$index)">查看详情</el-button> -->
            <el-button size="mini" type="text" @click="clickTableChildAdd(row)">选择房型</el-button>
            <el-button size="mini" type="text" style="color:#FF3434" @click="clickDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <img v-if="isShowImg && getStaticFileUrl(bigImg)" class="roomBigPhoto" :style="position" :src="getStaticFileUrl(bigImg)" alt="" @error="errorPhoto">
      <img v-if="isShowRoomImg && getStaticFileUrl(bigImg)" class="roomBigPhoto" :style="position" :src="getStaticFileUrl(bigImg)" alt="" @error="errorPhoto">
      <el-row class="gl_pt_20" style="text-align: right;">
        <el-pagination
          :current-page="Api_GET_HotelListQO.Page"
          :page-size="Api_GET_HotelListQO.MaxResultCount"
          :total="totalPage"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row>
    </template>
    <add-time ref="addTime" :is-hotel="true" @insert="timeInsert" @update="timeUpdate" />
    <add-hotel ref="addHotel" :dict="dict" :dict-all="dictAll" @insert="hotelInsert" />
    <add-room ref="addRoom" :dict="dict" :dict-all="dictAll" @insert="roomInsert" />
    <addRomemanage ref="romemanage"/>
  </div>
</template>

<script>

import { mapState, mapActions } from 'vuex';
import defaultHotelImg from '@/assets/images/face_default.png';
import addRomemanage from './addRomemanage'
import {
  Api_GET_EventsManagementLaunchedHotelHotelListQO,
  Api_GET_EventsManagementLaunchedRoomQO,
  SiSTKWEventsManagementLaunchedRoomUpdateDto
} from '@/lib/form/game/swaggerForm';
import { translateByCode } from '@/lib/getTransData';
import addHotel from './addHotel';
import addRoom from './addRoom';
import addTime from '../addTime';
import { CopyData } from '@/lib';
import {
  api_GET_EventsManagementLaunchedHotelHotelList,
  api_POST_EventsManagementLogisticReservationTimeCompetitionReservationTime,
  api_GET_EventsManagementLogisticReservationTimeCompetitionReservationTime,
  api_PUT_EventsManagementLogisticReservationTimeId,
  api_POST_EventsManagementLaunchedHotelCompetitionHotel,
  api_DELETE_EventsManagementLaunchedHotelId,
  api_GET_EventsManagementLaunchedRoom,
  api_PUT_EventsManagementLaunchedRoomId,
  api_DELETE_EventsManagementLaunchedRoomId,
  api_DELETE_EventsManagementlaunchedRoomStock,
  api_POST_EventsManagementLaunchedRoom,
  api_POST_EventsManagementLaunchedHotelTrainingHotel
} from '@/extend/api/gameswaggerApi/app.js';
export default {
  name: 'Hotel',
  components: {
    addHotel,
    addRoom,
    addTime,
    addRomemanage
  },
  data() {
    return {
      defaultHotelImg: defaultHotelImg,
      Api_GET_LaunchedRoomQO: new Api_GET_EventsManagementLaunchedRoomQO(),
      Api_GET_HotelListQO: new Api_GET_EventsManagementLaunchedHotelHotelListQO(),
      Api_PUT_LaunchedRoomUpdateDto: new SiSTKWEventsManagementLaunchedRoomUpdateDto(),
      freeDay: [],
      tableLoading: false,
      totalPage: 0,
      bookingTime: '', // 预订时间
      timeLoading: false,
      hotelRatingCode: {
        NoneStar: null,
        OneStar: 1,
        TwoStar: 2,
        ThreeStar: 3,
        FourStar: 4,
        FiveStar: 5
      },
      tableData: [],
      provinceList: [], // 地区的下拉列表
      hotelId: '', // 酒店编辑时候的id
      roomId: '', // 房型编辑时候的id
      currentPage: 1,
      editionsList: [],
      greatPersonList: [],
      bigImg: '',
      isShowImg: false,
      isShowRoomImg: false,
      timeOut: '',
      gameId: '',
      tableRow: {}, //
      position: {
        left: 0,
        top: 0
      },
      isTrain: false // 判断是不是培训管理里的后勤
    };
  },
  computed: {
    ...mapState({
      cache: state => state.dict.cache,
      dict: state => state.dict.dict,
      dictAll: state => state.dict.dictAll
    })
  },
  created() {
    this.gameId = this.$route.params.id;
    if (this.$route.path.indexOf('/train/') > -1) {
      this.isTrain = true;
    }
    this.getDictByType(['district']);
    this.getDict();
    this.getReservationTime();
    this.refreshList();
  },
  methods: {
    ...mapActions({ getDictByType: 'dict/getDictByType', getDict: 'dict/getDict' }),
    // 根据赛事和后勤业务编码获取预定时间
    getReservationTime() {
      this.timeLoading = true;
      const _providerName = this.isTrain ? 'T' : 'C'; // C是赛事 T是培训
      api_GET_EventsManagementLogisticReservationTimeCompetitionReservationTime({
        providerKey: this.gameId,
        providerName: _providerName,
        reservationCode: 'Hotel'
      }).then(res => {
        this.bookingTime = res || '';
        this.timeLoading = false;
      }, () => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        this.timeLoading = false;
      });
    },
    // 刷新列表
    refreshList(page) {
      this.tableLoading = true;

      this.Api_GET_HotelListQO.Page = page || 1;
      this.Api_GET_HotelListQO.SkipCount = (this.Api_GET_HotelListQO.Page - 1) * this.Api_GET_HotelListQO.MaxResultCount;
      this.Api_GET_HotelListQO.ProviderKey = this.gameId;
      this.Api_GET_HotelListQO.IncludeRoom = true;
      this.Api_GET_HotelListQO.IncludeHotelRating = true;

      api_GET_EventsManagementLaunchedHotelHotelList(this.Api_GET_HotelListQO).then(res => {
        res.items.map(item => {
          item.hotel.children = [];
          item.hotel.tableLoading = false;
        });
        this.tableData = res.items;
        this.totalPage = res.totalCount;
        this.tableLoading = false;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 展开事件----动态获取内嵌表数据
    expandChange(row, expandedRows) {
      // 该处是用于判断是展开还是收起行，只有展开的时候做请求，避免多次请求！
      // 展开的时候expandedRows有值，收起的时候为空.HasWindow
      if (expandedRows.length > 0) {
        this.getChildTableData(row);
      }
    },
    // 获取当前酒店所有房间   parentRow是从子table传入的父row
    getChildTableData(row, parentRow) {
      if (parentRow) {
        parentRow.hotel.tableLoading = true;
      } else {
        row.hotel.tableLoading = true;
      }
      const _id = parentRow ? parentRow.id : row.id;
      this.Api_GET_LaunchedRoomQO = new Api_GET_EventsManagementLaunchedRoomQO();
      this.Api_GET_LaunchedRoomQO.IncludeBedType = true;
      this.Api_GET_LaunchedRoomQO.IncludeBreakfastType = true;
      this.Api_GET_LaunchedRoomQO.IsLocked = null;
      this.Api_GET_LaunchedRoomQO.HasExtraBed = null;
      this.Api_GET_LaunchedRoomQO.HasWindow = null;
      this.Api_GET_LaunchedRoomQO.IncludeLauchedRoomStocks = true;
      this.Api_GET_LaunchedRoomQO.LaunchedHotelId = _id;
      api_GET_EventsManagementLaunchedRoom(this.Api_GET_LaunchedRoomQO).then(res => {
        // 遍历当前页面表
        this.tableData.forEach((temp, index) => {
          // 找到当前点击的行，把动态获取到的数据赋值进去
          if (temp.id === _id) {
            this.tableData[index].hotel.children = res || [];
            this.tableData[index].hotel.tableLoading = false;
          }
        });
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        if (parentRow) {
          parentRow.hotel.tableLoading = false;
        } else {
          row.hotel.tableLoading = false;
        }
      });
    },
    // 重置搜索表单
    refreshSearchForm() {
      this.Api_GET_HotelListQO = new Api_GET_HotelListQO();
      this.freeDay = [];
      this.refreshList();
    },
    // 日历选择器给QO赋值
    timeChange(val) {
      if (val instanceof Array) {
        this.Api_GET_HotelListQO.StartCreationTime = this.freeDay[0];
        this.Api_GET_HotelListQO.EndCreationTime = this.freeDay[1];
      } else {
        this.Api_GET_HotelListQO.StartCreationTime = '';
        this.Api_GET_HotelListQO.EndCreationTime = '';
      }
      this.refreshList(this.Api_GET_HotelListQO.Page);
      console.log(this.Api_GET_HotelListQO);
    },
    // 添加或修改酒店
    editOfAdd(row) {
      this.hotelId = row ? row.id : '';
      this.$refs.addHotel.open(row);
    },
    addRomemanage(row,res) {
      this.$refs.romemanage.bookingTime = this.bookingTime;
      this.$refs.romemanage.launchedRoomId = res.id;
      if(res.lauchedRoomStocks.length>0) {
        this.$refs.romemanage.lauchedRoomStocks = res.lauchedRoomStocks;
      }
      this.$refs.romemanage.open(row);
    },
    // 添加房型
    clickTableChildAdd(row) {
      // 没有酒店预订时间的话弹出提示框，先添加时间 this.bookingTime
      if (!this.bookingTime) {
        this.$message({ type: 'warning', message: '请先设置预定时间！' });
        return;
      }
      this.tableRow = row || {};
      this.$refs.addRoom.bookingTime = this.bookingTime;
      this.$refs.addRoom.open(row);
    },
    // 打开时间设置弹框
    clickTime(type) {
      this.$refs.addTime.open(this.bookingTime, type, this.gameId, 'Hotel');
    },
    // 添加时间设置
    timeInsert(data) {
      const _this = this;
      api_POST_EventsManagementLogisticReservationTimeCompetitionReservationTime(data).then(res => {
        this.$message({
          // 添加成功！
          message: translateByCode('alert.addSuccessfully'),
          type: 'success'
        });
        _this.$refs.addTime.dialogVisible = false;
        _this.$refs.addTime.submitLoading = false;
        this.getReservationTime();
      }, error => {
        _this.$refs.addTime.submitLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 修改时间设置
    timeUpdate(data) {
      const _this = this;
      api_PUT_EventsManagementLogisticReservationTimeId(data.id, { startDateTime: data.startDateTime, endDateTime: data.endDateTime,expirationTime: data.expirationTime }).then(res => {
        this.$message({
          // 添加成功！
          message: translateByCode('alert.editSuccessfully'),
          type: 'success'
        });
        _this.$refs.addTime.dialogVisible = false;
        _this.$refs.addTime.submitLoading = false;
        this.getReservationTime();
      }, error => {
        _this.$refs.addTime.submitLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 添加酒店
    hotelInsert(data) {
      const _this = this;
      if (this.isTrain) {
        api_POST_EventsManagementLaunchedHotelTrainingHotel({ providerKey: this.gameId, hotelsId: data }).then(res => {
          this.$message({
            // 添加成功！
            message: translateByCode('alert.addSuccessfully'),
            type: 'success'
          });
          _this.$refs.addHotel.dialogVisible = false;
          _this.$refs.addHotel.submitLoading = false;
          _this.refreshList(this.Api_GET_HotelListQO.Page);
        }, error => {
          _this.$refs.addHotel.submitLoading = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      } else {
        api_POST_EventsManagementLaunchedHotelCompetitionHotel({ providerKey: this.gameId, hotelsId: data }).then(res => {
          this.$message({
            // 添加成功！
            message: translateByCode('alert.addSuccessfully'),
            type: 'success'
          });
          _this.$refs.addHotel.dialogVisible = false;
          _this.$refs.addHotel.submitLoading = false;
          _this.refreshList(this.Api_GET_HotelListQO.Page);
        }, error => {
          _this.$refs.addHotel.submitLoading = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      }
    },
    // 添加房型
    roomInsert(data) {
      const _this = this;
      api_POST_EventsManagementLaunchedRoom(data).then(res => {
        this.$message({
          // 添加成功！
          message: translateByCode('alert.addSuccessfully'),
          type: 'success'
        });
        _this.$refs.addRoom.dialogVisible = false;
        _this.$refs.addRoom.submitLoading = false;
        _this.getChildTableData(_this.tableRow);
      }, error => {
        _this.$refs.addRoom.submitLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 控制房型的编辑状态
    clickEidt(row, index, jndex, type) {
      const _this = this;
      _this.Api_PUT_LaunchedRoomUpdateDto = new SiSTKWEventsManagementLaunchedRoomUpdateDto();
      CopyData(row, _this.Api_PUT_LaunchedRoomUpdateDto);
      _this.Api_PUT_LaunchedRoomUpdateDto.price = row.price / 100;
      _this.Api_PUT_LaunchedRoomUpdateDto.extraBedPrice = row.extraBedPrice / 100;
      _this.Api_PUT_LaunchedRoomUpdateDto.hasExtraBed = row.hasExtraBed;
      for (let i = 0; i < _this.tableData.length; i++) {
        const item = _this.tableData[i];
        for (let j = 0; j < item.hotel.children.length; j++) {
          const jtem = item.hotel.children[j];
          _this.$set(jtem, 'isEdit', false);
        }
      }
      _this.$set(_this.tableData[index].hotel.children[jndex], 'isEdit', type);
    },
    // 编辑房型信息
    clickChildrenRowSave(row, tableRow) {
      const _this = this;
      const _data = new SiSTKWEventsManagementLaunchedRoomUpdateDto();
      CopyData(this.Api_PUT_LaunchedRoomUpdateDto, _data);
      _data.price = _data.price ? Math.floor(_data.price * 1000) / 10 : 0;
      _data.extraBedPrice = _data.extraBedPrice ? Math.floor(_data.extraBedPrice * 1000) / 10 : 0;
      api_PUT_EventsManagementLaunchedRoomId(row.id, _data).then(res => {
        this.$message({
          // 添加成功！
          message: '保存成功',
          type: 'success'
        });
        _this.getChildTableData(tableRow);
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 删除按钮
    clickDelete(row) {
      const _this = this;
      // 您确定要删除 xxx 吗？ zh
      const _confirmStr = ` ${translateByCode('alert.wantDelete')} [ ${row.hotel.name} ] ${translateByCode('alert.ma')}`;
      this.$confirm(_confirmStr, translateByCode('alert.warning'), {
        confirmButtonText: translateByCode('alert.confirm'),
        cancelButtonText: translateByCode('alert.cancel'),
        type: 'warning'
      }).then(() => {
        api_DELETE_EventsManagementLaunchedHotelId(row.id).then(res => {
          this.$message({
            type: 'success',
            // 删除成功！
            message: translateByCode('alert.deleteSuccessfully')
          });
          _this.refreshList(this.Api_GET_HotelListQO.Page);
        }).catch(
          error => {
            const _msg = error.error.message || error.message;
            this.$message({
              duration: 15000,
              showClose: true,
              message: _msg,
              type: 'error'
            });
          }
        );
      });
    },
    // TableRow删除按钮
    deleteTableRow(row, tableRow) {
      const _this = this;
      // 您确定要删除 xxx 吗？ zh
      const _confirmStr = ` ${translateByCode('alert.wantDelete')} [ ${row.room.name} ] ${translateByCode('alert.ma')}`;
      this.$confirm(_confirmStr, translateByCode('alert.warning'), {
        confirmButtonText: translateByCode('alert.confirm'),
        cancelButtonText: translateByCode('alert.cancel'),
        type: 'warning'
      }).then(() => {
        api_DELETE_EventsManagementLaunchedRoomId(row.id).then(res => {
          this.$message({
            type: 'success',
            // 删除成功！
            message: translateByCode('alert.deleteSuccessfully')
          });
          _this.getChildTableData(tableRow);
        }).catch(
          error => {
            const _msg = error.error.message || error.message;
            this.$message({
              duration: 15000,
              showClose: true,
              message: _msg,
              type: 'error'
            });
          }
        );
      });
    },
    deleteroom(row) {
      const _this = this;
      // 您确定要删除 xxx 吗？ zh
      const _confirmStr = ` ${translateByCode('alert.wantDelete')} 该库存 ${translateByCode('alert.ma')}`;
      this.$confirm(_confirmStr, translateByCode('alert.warning'), {
        confirmButtonText: translateByCode('alert.confirm'),
        cancelButtonText: translateByCode('alert.cancel'),
        type: 'warning'
      }).then(() => {
        api_DELETE_EventsManagementlaunchedRoomStock(row.id).then(res => {
          this.$message({
            type: 'success',
            // 删除成功！
            message: translateByCode('alert.deleteSuccessfully')
          });
          _this.refreshList();
        }).catch(
          error => {
            const _msg = error.error.message || error.message;
            this.$message({
              duration: 15000,
              showClose: true,
              message: _msg,
              type: 'error'
            });
          }
        );
      });
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_HotelListQO.MaxResultCount = MaxResultCount;
      this.refreshList();
    },
    pageIndexChange(currentPage) {
      this.refreshList(currentPage);
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultHotelImg;
    },
    showImg(event, img) {
      const _this = this;
      _this.bigImg = img;
      const _img = event.target; // 这里就是获取到的dom元素
      const _position = _img.getBoundingClientRect();
      this.timeOut = setTimeout(() => {
        _this.isShowImg = true;
        this.$set(this.position, 'left', _position.left + 60 + 'px');
        this.$set(this.position, 'top', _position.top + 'px');
      }, 300);
    },
    hideImg(img) {
      const _this = this;
      clearTimeout(this.timeOut);
      _this.isShowImg = false;
    },
    showRoomImg(event, img) {
      const _this = this;
      _this.bigImg = img;
      const _img = event.target; // 这里就是获取到的dom元素
      const _position = _img.getBoundingClientRect();
      console.log(_position);
      this.timeOut = setTimeout(() => {
        _this.isShowRoomImg = true;
        _this.$set(_this.position, 'left', _position.left + 60 + 'px');
        _this.$set(_this.position, 'top', _position.top + 'px');
      }, 300);
      console.log(this.position);
    },
    hideRoomImg() {
      const _this = this;
      clearTimeout(this.timeOut);
      _this.isShowRoomImg = false;
    }
  }
};
</script>
<style lang="scss" scoped>
  .hotelPhoto, .roomPhoto{
    width: 48px;
    height: 36px;
    vertical-align: middle;
  }
  .hotelBigPhoto{
    width: 310px;
    height: 280px;
    position: absolute;
    z-index: 10;
    left: 70px;
  }
  .roomBigPhoto{
    width: 310px;
    height: 280px;
    position: fixed;
    z-index: 10;
  }
  .icon_color {
    color: #1682e6;
  }
  .el-input-number.is-without-controls .el-input__inner{
    padding-left: 5px;
    padding-right: 5px;
  }
</style>
